<template>
  <div>
    <a-typography>
      <a-typography-title :level="3">时间选择器</a-typography-title>
    </a-typography>
    <div>
      <TimeGroup />
    </div>
    <div style="margin-top: 30px">
      <TimeToolbar @register="register" @change="handleChange" />
    </div>
    <a-button @click="handleClick" style="margin-top: 20px">获取时间</a-button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { TimeGroup, TimeToolbar, useTimeToolbar } from "/@/components";
export default defineComponent({
  components: {
    TimeGroup,
    TimeToolbar,
  },
  setup() {
    const [register, { getValue }] = useTimeToolbar({
      selectedOption: 1,
      format: "YYYY-MM-DD",
      options: [1, 7, 15, 30],
    });
    async function handleClick() {
      const value = await getValue();
      console.log(value);
    }
    function handleChange(val: Array<number>) {
      console.log(val);
    }
    return {
      register,
      handleClick,
      handleChange,
    };
  },
});
</script>
